remark-frontmatter

What is remark-frontmatter?

The remark-frontmatter package is a plugin for the remark processor that allows you to parse and manipulate frontmatter in Markdown files. Frontmatter is typically used to include metadata at the beginning of a Markdown document, often in YAML or TOML format.

What are remark-frontmatter's main functionalities?

Parsing YAML frontmatter

This feature allows you to parse YAML frontmatter in a Markdown file. The code sample demonstrates how to use the remark-frontmatter plugin to parse YAML frontmatter and process the Markdown content.

const remark = require('remark');
const frontmatter = require('remark-frontmatter');

const markdown = `---
title: Example Title
date: 2023-10-01
---

# Hello World
`;

remark()
  .use(frontmatter, ['yaml'])
  .process(markdown, function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Parsing TOML frontmatter

This feature allows you to parse TOML frontmatter in a Markdown file. The code sample demonstrates how to use the remark-frontmatter plugin to parse TOML frontmatter and process the Markdown content.

const remark = require('remark');
const frontmatter = require('remark-frontmatter');

const markdown = `+++
title = "Example Title"
date = "2023-10-01"
+++

# Hello World
`;

remark()
  .use(frontmatter, ['toml'])
  .process(markdown, function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Parsing multiple types of frontmatter

This feature allows you to parse multiple types of frontmatter (e.g., YAML and TOML) in a Markdown file. The code sample demonstrates how to use the remark-frontmatter plugin to parse both YAML and TOML frontmatter and process the Markdown content.

const remark = require('remark');
const frontmatter = require('remark-frontmatter');

const markdown = `---
title: Example Title
date: 2023-10-01
---

# Hello World
`;

remark()
  .use(frontmatter, ['yaml', 'toml'])
  .process(markdown, function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Other packages similar to remark-frontmatter

gray-matter

gray-matter is a popular package for parsing frontmatter from strings or files. It supports YAML, TOML, and JSON frontmatter. Compared to remark-frontmatter, gray-matter is more versatile as it can be used outside of the remark ecosystem and provides more features for handling frontmatter data.

front-matter

front-matter is a simple package for parsing YAML frontmatter from strings. It is lightweight and easy to use but does not support TOML or JSON frontmatter. Compared to remark-frontmatter, it is more limited in scope but can be a good choice for projects that only need to handle YAML frontmatter.

markdown-it-front-matter

markdown-it-front-matter is a plugin for the markdown-it parser that allows you to extract frontmatter from Markdown files. It supports YAML frontmatter and integrates well with the markdown-it ecosystem. Compared to remark-frontmatter, it is designed specifically for use with markdown-it rather than remark.

README

remark-frontmatter

remark plugin to support frontmatter (YAML, TOML, and more).

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • unified().use(remarkFrontmatter[, options])
• Examples
  • Example: custom marker
  • Example: custom fence
• Syntax
• Syntax tree
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a unified (remark) plugin to add support for YAML, TOML, and other frontmatter. You can use this to add support for parsing and serializing this syntax extension.

unified is an AST (abstract syntax tree) based transform project. remark is everything unified that relates to markdown. The layer under remark is called mdast, which is only concerned with syntax trees. Another layer underneath is micromark, which is only concerned with parsing. This package is a small wrapper to integrate all of these.

When should I use this?

Frontmatter is a metadata format in front of content. It’s typically written in YAML and is often used with markdown. This mechanism works well when you want authors, that have some markup experience, to configure where or how the content is displayed or supply metadata about content. Frontmatter does not work everywhere so it makes markdown less portable. A good example use case is markdown being rendered by (static) site generators.

Install

This package is ESM only. In Node.js (12.20+, 14.14+, 16.0+), install with npm:

npm install remark-frontmatter

In Deno with Skypack:

import remarkFrontmatter from 'https://cdn.skypack.dev/remark-frontmatter@4?dts'

In browsers with Skypack:

<script type="module">
  import remarkFrontmatter from 'https://cdn.skypack.dev/remark-frontmatter@4?min'
</script>

Use

Say we have the following file, example.md:

+++
title = "New Website"
+++

# Other markdown

And our module, example.js, looks as follows:

import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'

main()

async function main() {
  const file = await unified()
    .use(remarkParse)
    .use(remarkStringify)
    .use(remarkFrontmatter, ['yaml', 'toml'])
    .use(() => (tree) => {
      console.dir(tree)
    })
    .process(await read('example.md'))

  console.log(String(file))
}

Now, running node example yields:

{
  type: 'root',
  children: [
    {type: 'toml', value: 'title = "New Website"', position: [Object]},
    {type: 'heading', depth: 1, children: [Array], position: [Object]}
  ],
  position: {
    start: {line: 1, column: 1, offset: 0},
    end: {line: 6, column: 1, offset: 48}
  }
}

+++
title = "New Website"
+++

# Other markdown

API

This package exports no identifiers. The default export is remarkFrontmatter.

unified().use(remarkFrontmatter[, options])

Configures remark so that it can parse and serialize frontmatter (YAML, TOML, and more). Doesn’t parse the data inside them: create your own plugin to do that.

options

One preset or Matter, or an array of them, defining all the supported frontmatters (default: 'yaml').

preset

Either 'yaml' or 'toml':

• 'yaml' — Matter defined as {type: 'yaml', marker: '-'}
• 'toml' — Matter defined as {type: 'toml', marker: '+'}

Matter

An object with a type and either a marker or a fence:

• type (string) — Type to tokenize as
• marker (string or {open: string, close: string}) — Character used to construct fences. By providing an object with open and close different characters can be used for opening and closing fences. For example the character '-' will result in '---' being used as the fence
• fence (string or {open: string, close: string}) — String used as the complete fence. By providing an object with open and close different values can be used for opening and closing fences. This can be used too if fences contain different characters or lengths other than 3
• anywhere (boolean, default: false) – if true, matter can be found anywhere in the document. If false (default), only matter at the start of the document is recognized

Examples

Example: custom marker

A custom frontmatter with different open and close markers, repeated 3 times, that looks like this:

<<<
data
>>>

# hi

…can be supported with:

// …
.use(remarkFrontmatter, {type: 'custom', marker: {open: '<', close: '>'}})
// …

Example: custom fence

A custom frontmatter with custom fences that are not repeated like this:

{
  "key": "value"
}

# hi

…can be supported with:

// …
.use(remarkFrontmatter, {type: 'json', fence: {open: '{', close: '}'}})
// …

Syntax

This plugin applies a micromark extensions to parse the syntax. See its readme for how it works:

• micromark-extension-frontmatter

The syntax supported depends on the given configuration.

Syntax tree

This plugin applies one mdast utility to build and serialize the AST. See its readme for how it works:

• mdast-util-frontmatter

The node types supported in the tree depend on the given configuration.

Types

This package is fully typed with TypeScript. The YAML node type is supported in @types/mdast by default. To add other node types, register them by adding them to FrontmatterContentMap:

import type {Literal} from 'mdast'

interface TOML extends Literal {
  type: 'toml'
}

declare module 'mdast' {
  interface FrontmatterContentMap {
    // Allow using toml nodes defined by `remark-frontmatter`.
    toml: TOML
  }
}

Compatibility

Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.

This plugin works with unified 6+ and remark 13+.

Security

Use of remark-frontmatter does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.

Related

• remark-yaml-config — configure remark from YAML configuration
• remark-gfm — support GFM (autolink literals, strikethrough, tables, tasklists)
• remark-github — link references to commits, issues, pull-requests, and users, like on GitHub
• remark-directive — support directives
• remark-math — support math

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer